<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-06 19:52:14
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-06 12:03:53
 * @FilePath: /nhw/src/views/Work/SafetyInspection/SafetyPresent.vue
-->
<template>
  <Layout
    title="安全检查"
    border
    class="safety-present-container"
    @click-left="goBack"
  >
    <section>
      <Form
        @submit="onSubmit"
        :show-error="false"
        validate-first
        validate-trigger="onSubmit"
      >
        <CellGroup>
          <Field
            v-model="content"
            input-align="right"
            label="安全检查内容"
            name="safetyContent"
            placeholder="请输入安全检查内容"
            :rules="[
              {
                required: true,
                message: () => {
                  $toast('请填写检查内容');
                },
              },
            ]"
          />
          <Cell title="检查类型" value="临时性" />
          <Cell
            title="检查责任部门"
            is-link
            :value="department.name || '请选择检查责任部门'"
            @click="showDepartmentlist"
          />
          <Cell
            title="检查组组长"
            is-link
            :value="groupLeader.name || '请选择检查组组长'"
            @click="showGroupLeader"
          />
        </CellGroup>
        <CellGroup>
          <Cell title="是否存在安全隐患">
            <RadioGroup
              direction="horizontal"
              v-model="radio"
              icon-size=".4rem"
              checked-color="#E16712"
            >
              <Radio name="1">是</Radio>
              <Radio name="0">否</Radio>
            </RadioGroup>
          </Cell>

          <Field
            @click="safetyContentShow = true"
            v-model="personnel"
            input-align="right"
            label="检查组成员"
            name="safetyContent"
            placeholder="请输入检查组成员"
            :rules="[
              {
                required: true,
                message: () => {
                  $toast('请输入检查组成员');
                },
              },
            ]"
          />
        </CellGroup>
        <CellGroup>
          <Collapse v-model="activeNames">
            <CollapseItem
              :title="'问题项(' + questionGroup.length + ')'"
              name="1"
            >
              <Card v-for="item in questionGroup" :key="item.id">
                <CardTitle
                  :text="item.rrpTypeName"
                  adorn
                  :stateText="item.rrlName"
                />
                <CardTwig left="整改责任人" :right="item.resolveUserName" />
                <CardTwig left="整改责任部门" :right="item.resolveDepartName" />
                <CardTwig left="发现时间" :right="item.resolveEndTime" />
              </Card>
            </CollapseItem>
          </Collapse>
          <Cell center>
            <div class="add-question" @click="toAppendQuestion">
              <Icon name="plus" />
              添加问题项
            </div>
          </Cell>
        </CellGroup>
        <!-- 提交  -->
        <div class="btn-wrap">
          <Button plain native-type="submit">提交</Button>
        </div>
        <!-- 提交 -->
      </Form>
    </section>

    <!-- 弹出选择框 -->

    <Popup
      v-model="departmentlistShow"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="departmentlist-wrap">
        <MySearch
          mark="department-list"
          actionText="关闭"
          placeholder="请输入部门"
          @search="handleSearch"
          @cancel="handleCancel"
        />
        <CellGroup class="department-list">
          <Cell
            v-for="item in departList"
            :key="item.id"
            :value="item.name"
            @click.stop="selectDepartment(item)"
          ></Cell>
        </CellGroup>
      </div>
    </Popup>

    <Popup
      v-model="groupLeaderShow"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="groupLeaderlist-wrap">
        <MySearch
          mark="leader-list"
          placeholder="请输入组长"
          actionText="关闭"
          @search="handleSearch"
          @cancel="handleCancel"
        />
        <CellGroup class="leader-list">
          <Cell
            v-for="item in groupLeaderList"
            :key="item.id"
            :value="item.name"
            @click.stop="selectGroupLeader(item)"
          ></Cell>
        </CellGroup>
      </div>
    </Popup>

    <Popup
      get-container="body"
      close-on-popstate
      v-model="safetyContentShow"
      position="bottom"
      :style="{ height: '90%' }"
      @close="closePopup"
    >
      <MySearch
        mark="content-list"
        actionText="关闭"
        @search="handleSearch"
        @cancel="handleCancel"
      />
      <div class="list-wrap">
        <CheckboxGroup v-model="empListChecked" v-if="empList.length > 0">
          <Checkbox
            icon-size="18px"
            checked-color="#E16712"
            :name="item.empId"
            v-for="item in empList"
            :key="item.empId"
            >{{ item.postName }} <i style="color: #e16712">-</i>
            {{ item.empName }}</Checkbox
          >
        </CheckboxGroup>
        <!-- 通用错误 -->
        <Empty
          image="error"
          description="无数据"
          v-show="empList.length <= 0"
        />
      </div>
      <!-- 底部按钮 start-->
      <div class="btn-wrap" v-if="empList.length > 0">
        <Button
          text="取消"
          color="#CACDD1"
          plain
          hairline
          @click.stop="reset"
        />
        <Button
          text="确认"
          color="#E16712"
          plain
          hairline
          @click.stop="confirm"
        />
      </div>
      <!-- 底部按钮 end -->
    </Popup>
  </Layout>
</template>

<script>
import Layout from "components/Layout";

import { getDepart, getUserList, goToCheckAdd } from "@/api/work.js";
import {
  Cell,
  CellGroup,
  Icon,
  Popup,
  Picker,
  RadioGroup,
  Radio,
  Form,
  Field,
  Button,
  CollapseItem,
  Collapse,
  CheckboxGroup,
  Checkbox,
  Empty,
} from "vant";
import Card from "components/Card";
import CardTwig from "components/Card/CardTwig";
import CardTitle from "components/Card/CardTitle";
import MySearch from "components/MySearch/index.vue";
export default {
  name: "SafetyPresent",

  components: {
    Layout,
    MySearch,
    Card,
    CardTwig,
    CardTitle,
    Cell,
    CellGroup,
    Icon,
    Popup,
    Picker,
    RadioGroup,
    Radio,
    Field,
    Form,
    Button,
    CollapseItem,
    Collapse,
    CheckboxGroup,
    Checkbox,
    Empty,
  },

  data() {
    return {
      activeNames: ["1"],
      orgNo: "",
      username: "",
      content: "",
      personnel: "",
      num: 0,
      groupLeaderShow: false,
      departmentlistShow: false,
      safetyContentShow: false,
      radio: "1",
      departList: [],
      department: {},
      groupLeaderList: [],
      groupLeader: {},
      questionGroup: [],
      empList: [],
      empListChecked: "",
    };
  },
  activated() {
    this.questionGroup = this.$store.state.questionGroup;
  },
  mounted() {
    this.orgNo = window.localStorage.getItem("orgNo");
  },
  methods: {
    closePopup() {},
    reset() {},
    confirm() {},
    onSearch() {},
    showGroupLeader() {
      if (!this.department.id) {
        this.$toast("请先选择责任部门");
        return;
      }
      this.groupLeaderList = [];
      this.getLeaderList(this.department.id);
      this.groupLeaderShow = true;
    },
    showDepartmentlist() {
      this.departList = [];
      this.getDepartList();
      this.departmentlistShow = true;
    },
    async onSubmit(values) {
      if (JSON.stringify(this.department) == "{}") {
        this.$toast("请选择责任部门");
        return;
      }
      if (JSON.stringify(this.groupLeader) == "{}") {
        this.$toast("请选择检查组组长");
        return;
      }
      if (this.radio == "1") {
        //检查是否填写安全检查问题
        if (this.questionGroup.length <= 0) {
          this.$toast("存在安全隐患需填写问题项内容");
          return;
        }
      }
      try {
        this.$toast("提交中...");
        const res = await goToCheckAdd({
          rprName: this.content, //安全检查内容
          dutyUser: this.groupLeader.id, //责任人
          dutyDepart: this.department.id, //责任部门
          state: "1", //已检查
          isDanger: this.radio, //是否有隐患
          dutyMember: this.personnel, //责任组成员
          item: this.questionGroup, //问题项
          orgNo: this.orgNo,
        });
        this.$toast("提交成功!");

        // 重置数据
        this.content = "";
        this.groupLeader = [];
        this.department = [];
        this.radio = "1";
        this.personnel = "";
        this.questionGroup = [];
        this.$store.state.questionGroup = [];
        //返回上一页
        this.$router.back();
      } catch (error) {
        console.log(error);
      }
    },
    goBack() {
      //返回上一页重置数据
      this.content = "";
      this.groupLeader = [];
      this.department = [];
      this.radio = "1";
      this.personnel = "";
      this.questionGroup = [];
      this.$store.state.questionGroup = [];
    },
    toAppendQuestion() {
      this.$router.push({ name: "SafetyAppendQuestion" });
    },
    //搜索
    handleSearch(data) {
      console.log(data);
      if (data.mark == "department-list") {
        this.getDepartList(data.key);
      } else if (data.mark == "leader-list") {
        this.getLeaderList(this.department.id, data.key);
      } else if (data.mark == "content-list") {
        //
      }
    },
    handleCancel(data) {
      if (data.mark == "department-list") {
        this.departmentlistShow = false;
      } else if (data.mark == "leader-list") {
        this.groupLeaderShow = false;
      } else if (data.mark == "content-list") {
        this.safetyContentShow = false;
      }
    },
    // 选中部门
    selectDepartment(value) {
      console.log(value);
      this.department = value;
      this.departmentlistShow = false;
    },
    selectGroupLeader(value) {
      console.log(value);
      this.groupLeader = value;
      this.groupLeaderShow = false;
    },
    //获取部门列表
    async getDepartList(keyValue = "") {
      this.$toast.loading("数据加载中...");
      const res = await getDepart({
        orgNo: this.orgNo,
        departName: keyValue,
      });
      this.departList = res.param.data;
      this.$toast.clear();
    },
    //获取组长列表
    async getLeaderList(departNo, keyValue = "") {
      this.$toast.loading("数据加载中...");
      const res = await getUserList({
        orgNo: this.orgNo,
        userName: keyValue,
        departNo: departNo,
      });
      this.groupLeaderList = res.param.data;
      this.$toast.clear();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
@import url("~style/var.less");
.safety-present-container {
  section {
    width: 100%;
    height: 100%;
    padding-bottom: 162px;
    overflow-y: scroll;
    box-sizing: border-box;
    .van-cell-group {
      margin-top: 20px;
    }

    .van-collapse {
      .card-container {
        margin-bottom: 10px;
        box-shadow: 0 2px 2px 2px #eee;
      }
    }
    .title {
      align-items: center;
      text-indent: 1em;
      &::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 30px;
        background: linear-gradient(0deg, #e0680f, #e68840);
        border-radius: 3px;
        overflow: hidden;
      }
    }
    .add-question {
      width: 100%;
      min-height: 40px;
      color: @primary;
      .flex();
    }

    .van-radio-group {
      justify-content: flex-end;
    }
    //提交按钮
    .btn-wrap {
      width: 100%;
      padding-bottom: 44px;
      position: fixed;
      bottom: 0;
      left: 0;
      background: #fff;
      .flex();
      .van-button {
        .clickableBtn();
        overflow: hidden;
        margin: 30px auto 0;
      }
    }
  }
  input {
    text-align: right;
    &::placeholder {
      text-align: right;
    }
  }
}
/deep/.van-field {
  span {
    color: #323232;
  }
}

/deep/.van-radio__icon .van-icon {
  border-color: @primary;
}
/deep/.van-radio__icon .van-icon {
  background: rgba(225, 103, 18, 0.2);
}
/deep/ .van-radio__icon--checked {
  .van-icon-success {
    background-color: rgba(225, 103, 18, 0.2) !important;
    background-image: radial-gradient(#e16712 50%, transparent 0);
    &::before {
      content: "";
    }
  }
}
/deep/ .van-collapse-item__content {
  padding: 0;
}
</style>